<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>趣味游戏</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gradient-to-br from-purple-400 via-pink-500 to-red-400 min-h-screen">
    <!-- 状态栏 -->
    <div class="flex justify-between items-center px-6 py-3 text-white">
        <span class="text-sm font-medium">9:41</span>
        <div class="flex items-center space-x-1">
            <i class="fas fa-signal text-sm"></i>
            <i class="fas fa-wifi text-sm"></i>
            <i class="fas fa-battery-three-quarters text-sm"></i>
        </div>
    </div>

    <!-- 头部 -->
    <div class="px-6 py-4">
        <div class="flex items-center justify-between text-white">
            <i class="fas fa-arrow-left text-xl"></i>
            <h1 class="text-xl font-bold">趣味游戏</h1>
            <div class="flex items-center space-x-2">
                <i class="fas fa-star text-yellow-300"></i>
                <span class="font-semibold">1250</span>
            </div>
        </div>
    </div>

    <!-- 主要内容 -->
    <div class="px-6 pb-20">
        <!-- 每日挑战 -->
        <div class="bg-white/20 backdrop-blur-lg rounded-3xl p-6 mb-6 border border-white/30">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-lg font-semibold text-white">每日挑战</h2>
                <div class="bg-yellow-400 text-yellow-900 px-3 py-1 rounded-full text-sm font-medium">
                    <i class="fas fa-trophy mr-1"></i>
                    2/3
                </div>
            </div>
            <p class="text-white/80 mb-4">完成今日挑战获得额外奖励！</p>
            <div class="w-full bg-white/30 rounded-full h-2">
                <div class="bg-yellow-400 h-2 rounded-full" style="width: 66%"></div>
            </div>
        </div>

        <!-- 游戏模式 -->
        <div class="space-y-4">
            <!-- 单词配对 -->
            <div class="bg-white rounded-2xl p-6 shadow-lg">
                <div class="flex items-center space-x-4">
                    <div class="w-16 h-16 bg-gradient-to-br from-blue-400 to-blue-600 rounded-2xl flex items-center justify-center">
                        <i class="fas fa-puzzle-piece text-white text-2xl"></i>
                    </div>
                    <div class="flex-1">
                        <h3 class="font-bold text-gray-800 text-lg mb-1">单词配对</h3>
                        <p class="text-gray-500 text-sm mb-2">将单词与图片正确配对</p>
                        <div class="flex items-center space-x-3">
                            <div class="flex items-center space-x-1">
                                <i class="fas fa-star text-yellow-400 text-sm"></i>
                                <span class="text-gray-600 text-sm">+50</span>
                            </div>
                            <div class="flex items-center space-x-1">
                                <i class="fas fa-clock text-gray-400 text-sm"></i>
                                <span class="text-gray-600 text-sm">5分钟</span>
                            </div>
                        </div>
                    </div>
                    <button class="bg-blue-500 text-white px-6 py-2 rounded-full font-medium">
                        开始
                    </button>
                </div>
            </div>

            <!-- 听音识词 -->
            <div class="bg-white rounded-2xl p-6 shadow-lg">
                <div class="flex items-center space-x-4">
                    <div class="w-16 h-16 bg-gradient-to-br from-green-400 to-green-600 rounded-2xl flex items-center justify-center">
                        <i class="fas fa-headphones text-white text-2xl"></i>
                    </div>
                    <div class="flex-1">
                        <h3 class="font-bold text-gray-800 text-lg mb-1">听音识词</h3>
                        <p class="text-gray-500 text-sm mb-2">听发音选择正确单词</p>
                        <div class="flex items-center space-x-3">
                            <div class="flex items-center space-x-1">
                                <i class="fas fa-star text-yellow-400 text-sm"></i>
                                <span class="text-gray-600 text-sm">+30</span>
                            </div>
                            <div class="flex items-center space-x-1">
                                <i class="fas fa-clock text-gray-400 text-sm"></i>
                                <span class="text-gray-600 text-sm">3分钟</span>
                            </div>
                        </div>
                    </div>
                    <button class="bg-green-500 text-white px-6 py-2 rounded-full font-medium">
                        开始
                    </button>
                </div>
            </div>

            <!-- 拼写挑战 -->
            <div class="bg-white rounded-2xl p-6 shadow-lg">
                <div class="flex items-center space-x-4">
                    <div class="w-16 h-16 bg-gradient-to-br from-purple-400 to-purple-600 rounded-2xl flex items-center justify-center">
                        <i class="fas fa-keyboard text-white text-2xl"></i>
                    </div>
                    <div class="flex-1">
                        <h3 class="font-bold text-gray-800 text-lg mb-1">拼写挑战</h3>
                        <p class="text-gray-500 text-sm mb-2">根据图片拼写单词</p>
                        <div class="flex items-center space-x-3">
                            <div class="flex items-center space-x-1">
                                <i class="fas fa-star text-yellow-400 text-sm"></i>
                                <span class="text-gray-600 text-sm">+80</span>
                            </div>
                            <div class="flex items-center space-x-1">
                                <i class="fas fa-clock text-gray-400 text-sm"></i>
                                <span class="text-gray-600 text-sm">8分钟</span>
                            </div>
                        </div>
                    </div>
                    <button class="bg-purple-500 text-white px-6 py-2 rounded-full font-medium">
                        开始
                    </button>
                </div>
            </div>

            <!-- 记忆翻牌 -->
            <div class="bg-white rounded-2xl p-6 shadow-lg">
                <div class="flex items-center space-x-4">
                    <div class="w-16 h-16 bg-gradient-to-br from-orange-400 to-orange-600 rounded-2xl flex items-center justify-center">
                        <i class="fas fa-brain text-white text-2xl"></i>
                    </div>
                    <div class="flex-1">
                        <h3 class="font-bold text-gray-800 text-lg mb-1">记忆翻牌</h3>
                        <p class="text-gray-500 text-sm mb-2">翻牌找到相同的单词</p>
                        <div class="flex items-center space-x-3">
                            <div class="flex items-center space-x-1">
                                <i class="fas fa-star text-yellow-400 text-sm"></i>
                                <span class="text-gray-600 text-sm">+60</span>
                            </div>
                            <div class="flex items-center space-x-1">
                                <i class="fas fa-clock text-gray-400 text-sm"></i>
                                <span class="text-gray-600 text-sm">6分钟</span>
                            </div>
                        </div>
                    </div>
                    <button class="bg-orange-500 text-white px-6 py-2 rounded-full font-medium">
                        开始
                    </button>
                </div>
            </div>
        </div>

        <!-- 排行榜预览 -->
        <div class="bg-white rounded-2xl p-6 mt-6 shadow-lg">
            <div class="flex items-center justify-between mb-4">
                <h3 class="font-semibold text-gray-800">本周排行榜</h3>
                <span class="text-blue-500 text-sm font-medium">查看全部</span>
            </div>
            <div class="space-y-3">
                <div class="flex items-center space-x-3">
                    <div class="w-8 h-8 bg-yellow-400 rounded-full flex items-center justify-center">
                        <span class="text-white font-bold text-sm">1</span>
                    </div>
                    <img src="https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?w=40&h=40&fit=crop&crop=face" 
                         alt="头像" class="w-8 h-8 rounded-full object-cover">
                    <div class="flex-1">
                        <span class="font-medium text-gray-800">小红</span>
                    </div>
                    <span class="text-yellow-500 font-semibold">2580分</span>
                </div>
                <div class="flex items-center space-x-3">
                    <div class="w-8 h-8 bg-gray-400 rounded-full flex items-center justify-center">
                        <span class="text-white font-bold text-sm">2</span>
                    </div>
                    <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=40&h=40&fit=crop&crop=face" 
                         alt="头像" class="w-8 h-8 rounded-full object-cover">
                    <div class="flex-1">
                        <span class="font-medium text-gray-800">小明</span>
                    </div>
                    <span class="text-gray-500 font-semibold">1250分</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部导航 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200">
        <div class="flex justify-around py-3">
            <div class="text-center">
                <i class="fas fa-home text-gray-400 text-xl mb-1"></i>
                <span class="text-gray-400 text-xs">首页</span>
            </div>
            <div class="text-center">
                <i class="fas fa-book text-gray-400 text-xl mb-1"></i>
                <span class="text-gray-400 text-xs">学习</span>
            </div>
            <div class="text-center">
                <i class="fas fa-gamepad text-blue-500 text-xl mb-1"></i>
                <span class="text-blue-500 text-xs font-medium">游戏</span>
            </div>
            <div class="text-center">
                <i class="fas fa-chart-line text-gray-400 text-xl mb-1"></i>
                <span class="text-gray-400 text-xs">进度</span>
            </div>
            <div class="text-center">
                <i class="fas fa-user text-gray-400 text-xl mb-1"></i>
                <span class="text-gray-400 text-xs">我的</span>
            </div>
        </div>
    </div>
</body>
</html>